<style>
  .model-form .layui-form-label {
    width: 110px;
  }
  .model-form .layui-input-block {
    margin-left: 140px;
  }
  .cardU {
    background-image: url(../../../admin/assets/images/card_u.png);
    background-repeat: no-repeat;
    background-position: center;
    width: calc(100% - 142px);
    height: 150px;
    padding: 0;
  }
  .cardU img {
    width: 100%;
    height: 100%;
  }
</style>
<form class="layui-form model-form" lay-filter="updInfoForm" id="form-updInfo">
  <input name="id" type="hidden" />
  <input name="postId" type="hidden" />
  <input name="roleIds" type="hidden" />
  <div class="layui-col-xs6">
    <div class="layui-form-item">
      <label class="layui-form-label">手机号</label>
      <div class="layui-input-block">
        <input type="phone" name="phone" placeholder="请输入手机号" class="layui-input" lay-verType="tips" lay-verify="required" required />
      </div>
    </div>
  </div>
  <div class="layui-col-xs6">
    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-block">
        <input type="email" name="email" placeholder="请输入邮箱" class="layui-input" lay-verType="tips" />
      </div>
    </div>
  </div>
  <div class="layui-col-xs6">
    <div class="layui-form-item">
      <label class="layui-form-label">工资卡开户行</label>
      <div class="layui-input-block">
        <input type="bank" name="bank" placeholder="请输入工资卡开户行" class="layui-input" lay-verType="tips" />
      </div>
    </div>
  </div>
  <div class="layui-col-xs6">
    <div class="layui-form-item">
      <label class="layui-form-label">工资卡账号</label>
      <div class="layui-input-block">
        <input type="account" name="account" placeholder="请输入工资卡账号" class="layui-input" lay-verType="tips" />
      </div>
    </div>
  </div>

  <div class="layui-col-xs6" style="height: 170px">
    <div class="layui-form-item">
      <label class="layui-form-label">身份证正面照</label>
      <div class="layui-upload-drag cardU" id="frontPhoto">
        <!--<i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>-->
        <input type="hidden" name="frontPhoto" lay-verify="" data-name="身份证正面照" />
      </div>
    </div>
  </div>
  <div class="layui-col-xs6" style="height: 170px">
    <div class="layui-form-item">
      <label class="layui-form-label">身份证背面照</label>
      <div class="layui-upload-drag cardU" id="backPhoto">
        <!--<i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>-->
        <input type="hidden" name="backPhoto" lay-verify="" data-name="身份证背面照" />
      </div>
    </div>
  </div>
  <div class="layui-col-xs6" style="height: 170px">
    <div class="layui-form-item">
      <label class="layui-form-label">头像</label>
      <div class="layui-upload-drag cardU" id="headerImg">
        <!--<i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>-->
        <input type="hidden" name="headerImg" lay-verify="" data-name="头像" />
      </div>
    </div>
  </div>
  <div class="layui-col-xs6" style="height: 170px">
    <div class="layui-form-item">
      <label class="layui-form-label">银行卡照片</label>
      <div class="layui-upload-drag cardU" id="bankCardPhoto">
        <!--<i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>-->
        <input type="hidden" name="bankCardPhoto" lay-verify="" data-name="银行卡照片" />
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block text-right">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
      <button class="layui-btn" lay-filter="submit-updInfo" lay-submit>保存</button>
    </div>
  </div>
</form>

<script type="text/javascript" src="assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="assets/libs/jquery/jquery.md5.js"></script>
<script>
  layui.use(["layer", "form", "admin", "upload", "config"], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var admin = layui.admin;
    var upload = layui.upload;
    var config = layui.config;

    // 查看当前用户
    admin.req(
      "user/admin/user/showInfo",
      {},
      function (data) {
        if (data.code == 200) {
          form.val("updInfoForm", data.data);
          if (data.data) {
            var frontPhoto = data.data.frontPhoto;
            if (frontPhoto) {
              $("#frontPhoto").html(
                '<img src="' + frontPhoto + '" alt="上传成功后渲染" style="max-width: 196px"><input type="hidden" name="frontPhoto" value="' + frontPhoto + '">'
              );
            }
            var backPhoto = data.data.backPhoto;
            if (backPhoto) {
              $("#backPhoto").html('<img src="' + backPhoto + '" alt="上传成功后渲染" style="max-width: 196px"><input type="hidden" name="backPhoto" value="' + backPhoto + '">');
            }
            var headerImg = data.data.headerImg;
            if (headerImg) {
              $("#headerImg").html('<img src="' + headerImg + '" alt="上传成功后渲染" style="max-width: 196px"><input type="hidden" name="headerImg" value="' + headerImg + '">');
            }
            var bankCardPhoto = data.data.bankCardPhoto;
            if (bankCardPhoto) {
              $("#bankCardPhoto").html(
                '<img src="' + bankCardPhoto + '" alt="上传成功后渲染" style="max-width: 196px"><input type="hidden" name="bankCardPhoto" value="' + bankCardPhoto + '">'
              );
            }
            console.log("data", data);
          }
        } else {
          layer.msg(data.msg, { icon: 2 });
        }
      },
      "GET"
    );

    //拖拽上传身份证正面图片
    upload.render({
      elem: "#frontPhoto",
      url: config.upload_url + "upload?path=" + img_path,
      auto: true,
      acceptMime: "image/*",
      headers: { authorization: "Bearer " + config.getToken() },
      done: function (res) {
        if (res.code == 200) {
          layer.msg("上传成功", { icon: 1 });
          var imagUrl = res.data.url;
          /*if(imagUrl){
                        imagUrl=imagUrl.substring(imagUrl.indexOf('/')+1)
                    }*/
          $("#frontPhoto").html('<img src="' + imagUrl + '" alt="上传成功后渲染" style="max-width: 196px"><input type="hidden" name="frontPhoto" value="' + imagUrl + '">');
        } else if (res.code == 502) {
          return location.replace("admin/login.html");
        } else {
          layer.msg(res.msg, { icon: 2 });
        }
      }
    });

    //拖拽上传身份证反面图片
    upload.render({
      elem: "#backPhoto",
      url: config.upload_url + "upload?path=" + img_path,
      auto: true,
      acceptMime: "image/*",
      headers: { authorization: "Bearer " + config.getToken() },
      done: function (res) {
        if (res.code == 200) {
          layer.msg("上传成功", { icon: 1 });
          var imagUrl = res.data.url;
          /*if(imagUrl){
                        imagUrl=imagUrl.substring(imagUrl.indexOf('/')+1)
                    }*/
          $("#backPhoto").html('<img src="' + imagUrl + '" alt="上传成功后渲染" style="max-width: 196px"><input type="hidden" name="backPhoto" value="' + imagUrl + '">');
        } else if (res.code == 502) {
          return location.replace("admin/login.html");
        } else {
          layer.msg(res.msg, { icon: 2 });
        }
      }
    });

    //拖拽上传头像图片
    upload.render({
      elem: "#headerImg",
      url: config.upload_url + "upload?path=" + img_path,
      auto: true,
      acceptMime: "image/*",
      headers: { authorization: "Bearer " + config.getToken() },
      done: function (res) {
        if (res.code == 200) {
          layer.msg("上传成功", { icon: 1 });
          var imagUrl = res.data.url;
          /*if(imagUrl){
                        imagUrl=imagUrl.substring(imagUrl.indexOf('/')+1)
                    }*/
          $("#headerImg").html('<img src="' + imagUrl + '" alt="上传成功后渲染" style="max-width: 196px"><input type="hidden" name="headerImg" value="' + imagUrl + '">');
        } else if (res.code == 502) {
          return location.replace("admin/login.html");
        } else {
          layer.msg(res.msg, { icon: 2 });
        }
      }
    });

    //拖拽上传银行卡照片
    upload.render({
      elem: "#bankCardPhoto",
      url: config.upload_url + "upload?path=" + img_path,
      auto: true,
      acceptMime: "image/*",
      headers: { authorization: "Bearer " + config.getToken() },
      done: function (res) {
        if (res.code == 200) {
          layer.msg("上传成功", { icon: 1 });
          var imagUrl = res.data.url;
          /*if(imagUrl){
                        imagUrl=imagUrl.substring(imagUrl.indexOf('/')+1)
                    }*/
          $("#bankCardPhoto").html('<img src="' + imagUrl + '" alt="上传成功后渲染" style="max-width: 196px"><input type="hidden" name="bankCardPhoto" value="' + imagUrl + '">');
        } else if (res.code == 502) {
          return location.replace("admin/login.html");
        } else {
          layer.msg(res.msg, { icon: 2 });
        }
      }
    });

    // 监听提交
    form.on("submit(submit-updInfo)", function (data) {
    //   data.field.roleIds = data.field.roleIds ? data.field.roleIds : "0";
      admin.req(
        "user/admin/user/update",
        data.field,
        function (data) {
          if (data.code == 200) {
            layer.closeAll();
            layer.msg(data.msg, { icon: 1 });
          } else {
            layer.msg(data.msg, { icon: 2 });
          }
        },
        "PUT"
      );
      return false;
    });

    // 添加表单验证方法
    form.verify({
      mobile: [/^(1(3|4|5|7|8|9)\d{9}|[ \t]*)$/, "手机号码格式错误"]
    });
  });
</script>
